<template>
  <div class="container" :style="'height: '+docheight+'px'">
    <leftcont></leftcont>
    <div class="righCont">
      <topcont></topcont>
      <div class="content">
        <div class="payTable">
          <div class="trendTop">提现列表({{ total }})</div>
          <div class="tableCont">
            <div class="tableSerchCont">
              <div class="serchItem">
                <el-select v-model="redCarStatusVal" placeholder="请选择提现状态">
                  <el-option
                    v-for="item in redCarStatusArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="serchItem">
                <el-input v-model="techName" placeholder="请输入教师姓名"></el-input>
              </div>
              <div class="serchItem">
                <el-input v-model="withdrawal_number" placeholder="请输入提现单号"></el-input>
              </div>
              <div class="headBtn">
                <btn @click="serchFn" value="搜索"></btn>
              </div>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="withdrawal_number"
                show-overflow-tooltip
                label="提现单号"
              >
              </el-table-column>
              <el-table-column
                prop="cleaning_name"
                width="150"
                show-overflow-tooltip
                label="教师姓名"
              >
              <template slot-scope="scope">
                  <div class="ctrolBtn flexStart">
                      <div @click="toTech(scope.row)" class="textLine">{{ scope.row.cleaning_name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
              show-overflow-tooltip
              prop="money"
                label="提现金额">
              </el-table-column>
              <el-table-column
                label="提现状态">
                <template slot-scope="scope">
                  <div class="ctrolBtn flexStart">
                      <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                          <span class="blueBtn" v-if="scope.row.status==1">待提现</span>
                          <span class="greenBtn" v-if="scope.row.status==2">已提现</span>
                          <span class="redBtn" v-if="scope.row.status==3">已驳回</span>
                      </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                  width="180"
                prop="create_time"
                show-overflow-tooltip
                label="申请时间">
              </el-table-column>
              <el-table-column
              width="180"
                prop="examine_time"
                show-overflow-tooltip
                label="操作时间">
              </el-table-column>
              <el-table-column
                label="提现凭证">
                <template slot-scope="scope">
                  <bigImg v-if="scope.row.voucher" height="40px" :src="scope.row.voucher"></bigImg>
                </template>
              </el-table-column>
              <el-table-column
              width="100"
                label="操作">
                <template slot-scope="scope">
                  <div class="ctrolBtn">
                    <div class="text_btn blueBtn" @click="showMaskFn(scope.row)" v-if="scope.row.status==1">提现</div>
                    <div class="text_btn redBtn" @click="cancelFn(scope.row)" v-if="scope.row.status==1">驳回</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageCont">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="per_page"
                :current-page="page"
                @current-change="pageFn"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="处理凭证"
      :visible.sync="showMask"
      width="500px"
      >
      <div class="maskCont">
        <div class="upCont">
          <defUpImg heigth="118px" bgc="#ffa718" @upImgSuccess="getImg"></defUpImg>
          <div class="defCtrl">
            <btn value="确认处理" @click="subFn"></btn>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import bigImg from '@/components/public/bigImg.vue'
  import {withdrawalExamine,Withdrawal} from "@/http/api";
  import defUpImg from '@/components/public/defUpImg.vue'

  export default {
    components: {leftcont,topcont,btn,defUpImg,bigImg},
    data() {
      return {
        redCarStatusArr:[
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '待审核'
          },{
            value: '2',
            label: '已提现'
          },{
            value: '3',
            label: '已驳回'
          },
        ],
        tableData: [],
        per_page:5,
        page:1,
        total:0,
        techName:'',
        withdrawal_number:'',
        redCarStatusVal:'',
        voucherImg:'',
        subItem:{},
        showMask:false,
      }
    },
    props: {},
    methods:{
      toTech(item){
        this.$router.push({path:'/techDetail',query:{id:item.cleaning_id}})
      },
      serchFn(){
        this.page = 1
        this.total = 0
        this.getdata()
      },
      pageFn(index){
        this.page = index
        this.getdata()
      },
      showMaskFn(item){
        this.subItem = item
        this.showMask = true
      },
      getImg(src){
        this.voucherImg = src
      },
      cancelFn(item){
          this.$prompt('请输入驳回理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            let data = {
              withdrawal_id:item.withdrawal_id,
              remark:value,
              status:3,
              voucher:'',
            }
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            withdrawalExamine(data).then((res)=>{
              if(res.data.code==1){
                this.$message({
                  message: '驳回成功',
                  type: 'success'
                });
                this.getdata()
              }else{
                this.$message(res.data.msg)
              }
              loading.close()
            }).catch((err)=>{
              loading.close()
            this.$message('服务器请求超时');
          })
          })
      },
      subFn(item){
        if(this.voucherImg==''){
          this.$message('请上传提现凭证')
          return false
        }
        let data = {
              withdrawal_id:this.subItem.withdrawal_id,
              remark:'',
              status:2,
              voucher:this.voucherImg,
            }
            this.showMask = false
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            withdrawalExamine(data).then((res)=>{
              if(res.data.code==1){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.getdata()
              }else{
                this.$message(res.data.msg)
              }
              loading.close()
            }).catch((err)=>{
              loading.close()
            this.$message('服务器请求超时');
          })
      },
      detailFn(item){
        this.$router.push({path:'/userPhone_jobDetail',query:{id:item.withdrawal_id}})
      },
      getdata(){
        var data ={
          per_page: this.per_page,
          page: this.page,
          cleaning_name:this.techName,
          status:this.redCarStatusVal,
          withdrawal_number:this.withdrawal_number,
        }
        Withdrawal(data).then((res)=>{
          if(res.data.code==1){
            this.tableData = res.data.data.data
            this.total = res.data.data.total
          }else{
            this.$message(res.data.msg)
          }
        }).catch((err)=>{
            this.$message('服务器请求超时');
          })
      },
    },
    mounted(){
    },
    created() {
      this.getdata()
    },
  }
</script>

<style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .payTable{
          margin-top: 20px;
          width: 100%;
          background-color: #fff;
          padding: 15px;
          box-sizing: border-box;
          .trendTop{
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
          }
          .tableCont{
            width: 100%;
            margin-top: 15px;
            .tableSerchCont{
              width: 100%;
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
              .serchItem{
                width: 150px;
                margin-left: 10px;
              }
              .headBtn{
                  margin-left: 10px;
              }
            }
            .ctrolBtn{
              display: flex;
              // justify-content: center;
              .text_btn{
                margin: 0 5px;
                cursor: pointer;
                font-size: 14px;
              }
              .redBtn{
                color: #F56C6C;
              }
              .blueBtn{
                color: #96A1FE;
              }
              .greenBtn{
                color: #85CE61;
              }
              .textLine{
                cursor: pointer;
                text-decoration: underline;
              }
            }
            .flexStart{
              justify-content: flex-start;
            }
            .pageCont{
              padding: 30px 0;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>
